<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" v-on:click="keywordQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表v-loading="listLoading"-->
    <el-table
      :data="tableDatas"
      v-loading="listLoading"
      @selection-change="handleSelectionChange"
      highlight-current-row
      style="width: 100%"
    >
      <!--多选框-->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="260" label="序号"> </el-table-column>
      <el-table-column prop="name" label="权限名称" width="340">
      </el-table-column>
      <el-table-column prop="url" label="接口地址" width="340">
      </el-table-column>
      <el-table-column prop="sn" label="权限编码" width="340">
      </el-table-column>
      <el-table-column prop="descs" label="权限描述" width="340">
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
        style="float: right"
      >
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
export default {
  data() {
    return {
      //1.分页查询相关数据
			totals: 0,//总记录条数
			currentPage: 1,//当前页,要传递到后台的
			pageSize: 5, //每页显示多少条
			tableDatas: [], //当前页数据
			listLoading: false,

			//2.高级查询相关数据
			keyword: '',
    }
  },
  methods: {
    getTableData(){
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword,
      };
      this.listLoading = true; //显示加载圈!!!
      //分页查询
      this.$http.post("/permission", para).then((result) => {
        console.log(result);
        this.totals = result.data.total; //注意后端返回的是total,而不是totals!!!,可以打印result查看
        this.tableDatas = result.data.list;
        this.listLoading = false; //关闭加载圈!!!
      });
    },
     //1.2.选择第几页时触发
    handleCurrentChange(curentPage) {
      this.currentPage = curentPage;
      this.getTableData(); //获取列表数据
    },
    //1.3.选择每页显示记录条数时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getTableData(); //获取列表数据
    },

    //2.高级查询相关方法
    keywordQuery() {
      this.currentPage = 1; //!!!

      this.getTableData(); //调用调用分页列表方法,因为关键字keyword已经进行了v-model的双向绑定!
    }
  },

  mounted() {
    this.getTableData();
  },
};
</script>

<style scoped></style>
